<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:schemaLocation="http://www.thymeleaf.org ">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>登录首页</title>
    <!--导入Bootstrap CSS-->
    <link th:href="@{/webjars/bootstrap/5.1.3/css/bootstrap.css}" rel="stylesheet">


</head>
<body>
<div class="container">
    <form id="form-login" method="post">
        <div class="col-md-4 offset-md-4 pt-5 text-center">
            <h1>登录系统</h1>
            <div class="form-floating mb-3">
                <input name="email" type="email" class="form-control" id="floatingInput">
                <label for="floatingInput">邮箱账号</label>
            </div>
            <div class="form-floating">
                <input name="password" type="password" class="form-control" id="floatingPassword">
                <label for="floatingPassword">密码</label>
            </div>

            <div class="text-center pt-3">

                <button onclick="login()" type="button" id="btn-login" class="btn btn-primary w-50">
                    <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                    登录
                </button>
                <a href="/register">注册新账号</a>
            </div>
        </div>
    </form>
</div>

<!--导入Bootstrap JavaScript-->
<script type="text/javascript" th:src="@{/webjars/bootstrap/5.1.3/js/bootstrap.bundle.js}"></script>
<script type="text/javascript" th:src="@{/webjars/jquery/3.3.1/jquery.js}"></script>
<script>
    $('.spinner-border').hide();
    function login(){
        $('.spinner-border').show();
        $.ajax({
            url: '/login',
            type: 'post',
            dataType: 'json',
            data: $('#form-login').serialize(),
            error: function(err){
                alert('请求失败!')
                console.error(err.responseText)
            },
            success: function(data){
                if(data['status'] === 'success'){
                    location.href='/index';
                } else{
                    alert('密码错误.')
                }
                $('.spinner-border').hide()
            }
        });
    }
</script>

</body>
</html>